<template>
	<div class="travel-list">
		<ul >
			<li v-for="item in list" :key='item.id'>
				<template  v-if="item.type==1">
					<img :src="item.image"/>
				</template>
				<template   v-else-if="item.type==2">
					<img  :src="item.image"/>
					<p>{{item.title}}</p>
					<article>{{item.name}}</article>
				</template>
				<template   v-else-if="item.type==3">
					<img :src="item.image" />
					<strong>{{item.city}}</strong>
					<p>{{item.title}}</p>
					<article>{{item.name}}</article>
					<label>
						<aside>￥{{item.price}}起</aside>
						<span>{{item.num}}人已报名</span>
					</label>
				</template>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'TravelMenusTab10',
		data(){
			return{	
				list:[
				{id:1,image:'/fun/img-5-1.jpg',type:3,title:'[读城·首都博物馆] 北京坐标，凝缩京城历史文化/承古通今，探世遗城市轴线/6个场景串联重要历史节点，再现北京波澜壮阔历史画卷/京味儿土著讲师，阐释京城文化独特的韵味',name:'当地体验·一日游·1天',price:166,num:546,city:'北京市'},
				{id:2,image:'/fun/img-5-2.jpg',type:3,title:'[寻找长安·西安博物院]探索西安博物院珍宝/解密青铜器背后的寓意/长安城108坊区布局/导游风趣讲解/了解历代佛教造像/荐福寺内敲钟祈福/小雁塔千年神合传说（10人小团）',name:'当地体验·City Walk·1天',price:118,num:192,city:'西安'},
				{id:3,image:'/fun/img-5-3.jpg',type:3,title:'[游侠人文 • 寻窑记]景德镇专家带你认识瓷器的前世今生，面对面教学如何鉴赏瓷器之美，解读民窑和官窑的区别，亲手制作一件瓷器，一睹瓷器诞生的全工序，创意市集陶溪川3天2晚',name:'跟团游·深度人文·3天2晚',price:1860,num:7,city:'景德镇出发'},
				{id:4,image:'/fun/img-5-4.jpg',type:3,title:'[徒步恩施秘境]可提前一晚离开！2021神秘北纬30度，屏山峡谷-恩施大峡谷-鹿院坪-利川-清江古河床，鹿院坪感受世外桃源，清江古河床徒步，“湖北的香格里拉”徒步7日游！',name:'跟团游·深度人文·7天6晚',price:129,num:5,city:'北京出发'},
				{id:5,image:'/fun/img-5-5.jpg',type:3,title:'[红色印记·八宝山革命公墓]11-1月，京西红色之旅，缅怀英烈，聆听红色经典故事，细细品味旧时光里先烈的苦与甜（北京1日游6人成行）',price:189,num:7,city:'北京出发'},
				{id:6,image:'/fun/img-5-6.jpg',type:3,title:'[两都赋·从长安到洛阳]2座千年帝都，1次历史穿越，大咖老师随行，从帝国旧事、建都之争、黄河漕运、佛教传播到大唐盛世、大中原浮沉，西安进洛阳出，7天6晚领略中国历史脉络',name:'跟团游·深度人文·7天6晚',price:4580,num:10,city:'西安出发'},
				{id:7,image:'/fun/img-5-7.jpg',type:3,title:'[西安轻奢游]1家1团/配备1司机+1导游+1车/精选市区内五钻酒店3晚连住/推介地道美食/涵盖经典景点/金牌导游带队/各项趣玩体验/免费接送机/4天3晚轻奢游',name:'跟团游·深度人文·4天3晚',price:2260,num:166,city:'西安'},
				{id:8,image:'/fun/img-5-8.jpg',type:3,title:'[陕西历史博物馆·国家宝藏]2.5-3小时风趣讲解/含基础馆+珍宝馆门票/6人小团/新增壁画馆套餐/满足你的选择，名额紧张一票难求，建议提前3天下单！',name:'跟团游·一日游·1天',price:118,num:1620,city:'西安'},
				{id:9,image:'/fun/img-5-9.jpg',type:3,title:'[游侠人文 • 宋韵临安梦华录]知名学者李飞老师带你循迹千年、重返南宋/汉服旅拍/寻太学/赏高宗赵构御笔石经/品宋宴/亲历宋式点茶/径山禅寺访古，做一回风雅临安人的两天',name:'跟团游·深度人文·2天1晚',price:1980,num:20,city:'杭州出发'},
				{id:10,image:'/fun/img-5-10.jpg',type:3,title:'[省内休闲·慢行高邮]12.26周日，中国邮驿“活化石”盂城驿/网红打卡点汪曾祺纪念馆/京杭运河中心镇国寺， 漫步南门大街，沉浸高邮湖落日，网罗高邮精华（单日暖冬行）',name:'跟团游·深度人文·1天',price:135,num:6,city:'南京出发'},
				{id:11,image:'/fun/img-19.jpg',type:2,title:'毕棚沟',name:'4060人种草'},
				{id:12,image:'/fun/img-21.jpg',type:3,title:'[无限风光•老君山]12-2月，赏景圣地老君山&中岳嵩山，千年古刹少林寺，北方溶洞鸡冠洞，伏牛十里画屏，看少林功夫，日出云海星空（4日深度游，河南赏风光）',name:'跟团游·休闲度假·4天3晚',price:1580,num:148,city:'郑州出发'}
				] ,
					count:4,
					isAchiveBottom:false,
					person:[],
				icons:[]	
			}
		},
	}
</script>

<style scoped>
	.travel-list{
		width: 100%;
	}
	.travel-list ul li{
		width: 48%;
		float: left;
		margin: 0.1rem 0.1rem;
		height: 6.5rem;
		background-color:#fff;
		position: relative;
		border-radius: 0.2rem;
	}
	
	.travel-list ul li:nth-child(1) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(1) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(1) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(1) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(1) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(1) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(1) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	
	
	.travel-list ul li:nth-child(2) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(2) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(2) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(2) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(2) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(2) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(2) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	
	.travel-list ul li:nth-child(3) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(3) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(3) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(3) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(3) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(3) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(3) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	.travel-list ul li:nth-child(4) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(4) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(4) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(4) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(4) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(4) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(4) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}	
	.travel-list ul li:nth-child(5) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(5) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(5) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(5) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(5) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(5) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(5) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	
	.travel-list ul li:nth-child(6) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(6) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(6) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(6) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(6) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(6) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(6) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(7) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(7) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(7) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(7) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(7) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(7) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(7) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(8) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(8) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(8) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(8) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(8) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(8) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(8) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(9) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(9) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(9) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(9) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(9) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(9) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(9) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(10) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(10) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(10) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(10) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(10) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(10) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(10) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	.travel-list ul li:nth-child(11) img{
		width: 100%;
		height: 80%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(11) p{
		font-size: 0.4rem;
		font-weight: bold;
		padding: 0.2rem 0.2rem;
	}
	.travel-list ul li:nth-child(11) article{
		font-size: 0.3rem;
		padding-top: 0.1rem;
		padding-left: 0.2rem;
	}
	
	
	.travel-list ul li:nth-child(12) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(12) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(12) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(12) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(12) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(12) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(12) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
</style>
